﻿@{
    Layout = null;
    var adImageServer = new Ec_System.Facade.Web.SiteConfigFacade().AdCommendPicURL;
    var adImage = new Ec_System.Facade.Web.AdRecommendFacade().GetUserRegPageADImage;
}

<script language="javascript">
    $(document).ready(
        function () {
            $("#userRegForm").validate({
                rules: {
                    txt_uname: {
                        required: true,
                        rangelength: [4,15],
                        remote: {
                            url: "/Customer/ValidateUserName",
                            type: "post",
                            data: {txt_uname: function () { return $("#txt_uname").val(); }}
                        }
                    },
                    txt_mail: {
                        required: true,
                        email: true,
                        remote: {
                            url: "/Customer/ValidateEmail",
                            type: "post",
                            data: { txt_mail: function () { return $("#txt_mail").val(); } }
                        }
                    },
                    txt_tel: {
                        required: true,
                        remote: {
                            url: "/Customer/ValidateTel",
                            type: "post",
                            data: { txt_tel: function () { return $("#txt_tel").val(); } }
                        }
                    },
                    txt_pass2: {
                        equalTo: "#txt_pass"
                    }
                },
                messages: {
                    txt_uname: { required: "用户名不能为空！", rangelength: "用户名长度只能是4-40个字符!", remote: "用户名已经存在！" },
                    txt_mail: { required: "Email不能为空!", email: "Email的格式错误", remote: "Email已经存在!" },
                    txt_tel: { required: "号码不能为空", remote: "号码已经存在" },
                    txt_pass2:{equalTo: "两次密码不一致"}
            }
            });
        });
</script>

<div class="usBox clearfix">
    <div class="usBox_top">
        <a href="/Customer/UserLogin">登陆</a>
        <a class="active" href="/Customer/UserReg">注册</a>
        <a href="/Customer/UserFindPwd">找回密码</a>
        <a href="/Customer/ReSendMail">重发验证邮件</a>
    </div>
    <div class="longTop">Hi，<span style="color:#666">未登录</span>，登录果蔬汇与 <b style="color:#f90">10000</b> 位网友，一起交流经验分享快乐吧！</div>

    <form action="/Customer/UserReg" method="post" id="userRegForm">
        <table width="100%" class="norTable register">
            <tbody>

                <tr>
                    <th width="100">用户名</th>
                    <td>
                        <input name="txt_uname" type="text" size="25" id="txt_uname" class="inputBg required" maxlength="50" />
                        <span id="username_notice" style="color:#FF0000"> * </span>
                    </td>
                    <!--广告-->
                    <td width="435" class="leftBorder center" rowspan="9" style="color:#FFF;border-bottom:none">
                        @foreach (var item in adImage)
                        {
                            <a href="http://www.guoshuhui.com" target="_blank"><img src="@adImageServer/@item.AdPicName" style="padding-left:5px;" width="425" height="320" /></a>
                        }
                    </td>
                </tr>

                <tr>
                    <th>密码</th>
                    <td>
                        <input name="txt_pass" type="password" id="txt_pass" class="inputBg required maxlength minlength" onkeyup="checkIntensity(this.value)" />
                        <span style="color:#FF0000" id="password_notice"> *</span>

                    </td>
                </tr>

                <tr>
                    <th>密码强度</th>
                    <td>

                        <table width="260" border="0" cellspacing="0" cellpadding="1">
                            <tr align="center">
                                <td width="33%" id="pwd_lower">弱</td>
                                <td width="33%" id="pwd_middle">中</td>
                                <td width="33%" id="pwd_high">强</td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <th>确认密码</th>
                    <td>
                        <input name="txt_pass2" type="password" id="txt_pass2" class="inputBg required equalTo" />
                        <span style="color:#FF0000" id="conform_password_notice"> *</span>

                    </td>
                </tr>

                <tr>
                    <th>邮箱</th>
                    <td>
                        <input name="txt_mail" type="text" size="25" id="txt_mail" class="inputBg required email" maxlength="50" />
                        <span id="email_notice" style="color:#FF0000"> *</span>
                    </td>
                </tr>
                <tr>
                    <td align="right">QQ
                    <td>
                        <input name="txt_qq" id="txt_qq" type="text" size="25" class="inputBg" />
                    </td>
                </tr>
                <tr>
                    <td align="right" id="extend_field5i">手机
                    <td>
                        <input name="txt_tel" id="txt_tel" type="text" size="25" class="inputBg required maxlength" maxlength="11" /><span style="color:#FF0000"> *</span>
                    </td>
                </tr>
                <tr>
                    <td align="right" id="extend_field5i">验证码
                    <td>
                        <input type="text" name="ValidatorCode" size="30" class="inputBg" />
                        <span style="color:red;">@ViewBag.VCodeError</span>
                        <img id="valiCode" style="vertical-align:bottom;" src="/Customer/GetValidateCode" />
                    </td>
                </tr>
                <tr>
                    <th> </th>
                    <td>
                        <label>
                            <input name="chk_agreement" id="chk_agreement" type="checkbox" class="required" value="1" checked="checked" />
                            我已看过并接受《<a href="/Customer/RegAgreement" style="color:blue" target="_blank">用户协议</a>》
                        </label>

                    </td>

                <tr>
                    <th style="border-bottom:none"> </th>
                    <td style="border-bottom:none">
                        <input name="Submit" type="submit" value="注 册" class="user_bnt"> <span class="caaa">已注册请</span> <a class="c4095ce" href="/Customer/UserLogin">登录</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</div>
<script>
    //检测密码强度
    function checkIntensity(pwd) {
        var Mcolor = "#FFF", Lcolor = "#FFF", Hcolor = "#FFF";
        var m = 0;

        var Modes = 0;
        for (i = 0; i < pwd.length; i++) {
            var charType = 0;
            var t = pwd.charCodeAt(i);
            if (t >= 48 && t <= 57) {
                charType = 1;
            }
            else if (t >= 65 && t <= 90) {
                charType = 2;
            }
            else if (t >= 97 && t <= 122)
                charType = 4;
            else
                charType = 4;
            Modes |= charType;
        }

        for (i = 0; i < 4; i++) {
            if (Modes & 1) m++;
            Modes >>>= 1;
        }

        if (pwd.length <= 4) {
            m = 1;
        }

        switch (m) {
            case 1:
                Lcolor = "2px solid red";
                Mcolor = Hcolor = "2px solid #DADADA";
                break;
            case 2:
                Mcolor = "2px solid #f90";
                Lcolor = Hcolor = "2px solid #DADADA";
                break;
            case 3:
                Hcolor = "2px solid #3c0";
                Lcolor = Mcolor = "2px solid #DADADA";
                break;
            case 4:
                Hcolor = "2px solid #3c0";
                Lcolor = Mcolor = "2px solid #DADADA";
                break;
            default:
                Hcolor = Mcolor = Lcolor = "";
                break;
        }
        if (document.getElementById("pwd_lower")) {
            document.getElementById("pwd_lower").style.borderBottom = Lcolor;
            document.getElementById("pwd_middle").style.borderBottom = Mcolor;
            document.getElementById("pwd_high").style.borderBottom = Hcolor;
        }

    }
</script>
